<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <!-- 导入 bootstrap.min.css -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- 导入 vue.global.js -->
    <script src="{% static 'js/vue.global.js' %}"></script>
    <!-- 导入 axios.min.js -->
    <script src="{% static 'js/axios.min.js' %}"></script>
</head>
<body>
<div id="app">
  <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">标题</th>
      <th scope="col">内容</th>
      <th scope="col">作者</th>
      <th scope="col">价格</th>
      <th scope="col">发布日期</th>
      <th scope="col">状态</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
  <!--遍历articles 文章列表数据-->
  {% for article in articles %}
    <tr>
      <th scope="row">{{ article.id }}</th>
      <td>{{ article.title }}</td>
      <td>{{ article.content }}</td>
      <td>{{ article.author }}</td>
      <td>{{ article.price }}</td>
      <td>{{ article.pub_date }}</td>
      <td>
        {% if article.status == 1 %}
          <span class="badge bg-success">已发布</span>
        {% else %}
          <span class="badge bg-danger">草稿</span>
        {% endif %}
      </td>
      <td>
        <button type="button" class="btn btn-primary">编辑</button>
      </td>
    </tr>
  {% endfor %}

  </tbody>
</table>
</div>
</body>
</html>